<template>
    <div class="box">
        <div class="left" @click="$emit('tz')" >
            <slot name="img">

            </slot>
        </div>
        <div class="right">
            <p class="p1">
                <span  @click="$emit('tz')" >{{ title }} </span>
                <span class="iconfont" @click="$emit('del')" >&#xe74b;</span>              
            </p>
            <p class="p2">{{ num }}人已兑换</p>
            <span class="sp1"  @click="$emit('tz')" >{{ discountPrice }}币</span>
            <del  @click="$emit('tz')" >{{ price }}</del>
        </div>
    </div>
</template>

<script setup>

defineEmits(['del','tz'])


defineProps({
    title: {
        default: '商品'
    },
    num: {
        default: 777
    },
    price: {
        default: 200
    },
    discountPrice: {
        default: 180
    }
})

</script>

<style lang="less" scoped>
.box {
    width: 90vw;
    background: white;
    height: 30vw;
    display: flex;
    
    .left {
        width: 30vw;
        background: yellow;
        height: 30vw;
    }

    .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 1.7vw;
        height: 30vw;

        .p1 {
            font-size: 3.8vw;
            display: flex;
            justify-content: space-between;
            .iconfont{
                color: red;
            }
        }

        .p2 {
            font-size: 3vw;
            margin: 1.2vw 0 5.333vw;
            color: rgba(128, 128, 128, 0.516);

        }

        .sp1 {
            font-size: 4.5vw;
            color: red;
        }

        del {
            margin-top: 1vw;
            color: rgba(128, 128, 128, 0.516);
            font-size: 3vw;
            text-decoration: line-through;
            padding: 0 1vw;
        }
    }

}
</style>